<template>
	<view class="container">
		<view class="detail-top">
			<view class="top-info">
				<view class="top-img">
					<image :src="img" mode="" style="width: 180rpx; height: 180rpx;">
					</image>
				</view>
				<view class="top-goods-info">
					<view>{{ goodsInfo.goods_name }}</view>
					<view class="text-color">套餐: {{ goodsInfo.setmeal_name }}</view>
					<view class="text-color">租期: {{ goodsInfo.lease_time }}</view>
					<view class="total">
						<view>总租金: ￥{{ goodsInfo.total_rent }}（共{{ goodsInfo.total_num }}期）</view>
						<view>x{{ amount }}</view>
					</view>
				</view>
			</view>

			<view class="divider"></view>

			<view class="goods-price">
				<view class="price-item">
					<view>{{ goodsInfo.first_rent }}</view>
					<view class="text-color" style="text-align: center;">首期租金（元）</view>
				</view>
				<view class="price-item">
					<view>{{ goodsInfo.total_rent }}</view>
					<view class="text-color" style="text-align: center;">总租金（元）</view>
				</view>
				<view class="price-item">
					<view>{{ goodsInfo.goods_price }}</view>
					<view class="text-color" style="text-align: center;">商品总价值（元）</view>
				</view>
			</view>
		</view>

		<view style="padding: 20rpx;">
			<view class="every-count">
				<view class="every-tips">
					<view>
						分期方式
					</view>
					<view style="display: flex; justify-content: center; align-items: center;">
						<view style="margin-right: 10rpx; color: #a6a6a6;">
							1个月租期间隔
						</view>
						<image src="@/static/images/bangzhu.png" mode="" style="width: 35rpx; height: 35rpx;"
							@click="showPopup">
						</image>
					</view>
				</view>
				<view class="divider"></view>

				<view class="table" style="margin-top: 20rpx;">
					<uni-table border stripe emptyText="暂无更多数据">
						<uni-tr>
							<uni-th align="center" :width="70">期数</uni-th>
							<uni-th align="center" :width="185">租期</uni-th>
							<uni-th align="center" :width="95">每期租金</uni-th>
						</uni-tr>
						<uni-tr v-for="(item, index) in goodsInfo.order_lease" :key="index">
							<uni-td align="center">{{ item.which_period }}</uni-td>
							<uni-td align="center">{{ item.lease_term }}</uni-td>
							<uni-td align="center">{{ item.lease_price }}元</uni-td>
						</uni-tr>
					</uni-table>
				</view>
			</view>
		</view>
		<view class="return-btn">
			<button class="return" @click="back">返回</button>
		</view>
		<van-popup :show="show" @close="onClose"
			custom-style="height: 25%; width: 70%; border-radius: 20rpx; padding: 2vh 2vw;" position="center">
			<view class="title" style="text-align: center; font-weight: 800;">
				分期方式
			</view>
			<view class="content">1.您当前选中的套餐租期为自定义租期商品，每期租赁周期为1个月，到租赁结束时间为止。</view>
			<view class="content">2.扣款日为每期开始租赁期间</view>
		</van-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				goods_id: null,
				amount: null,
				setmeal_id: null,
				spec_id: null,
				img: '',
				goodsInfo: {}
			}
		},
		onLoad(options) {
			this.goods_id = options.goods_id
			this.amount = options.amount
			this.setmeal_id = options.setmeal_id
			this.spec_id = options.spec_id
			this.img = options.img
			console.log(options.img);
			this.getOrderTerm()
		},
		methods: {
			showPopup() {
				this.show = true
			},
			onClose() {
				this.show = false
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			async getOrderTerm() {
				let params = {
					goods_id: this.goods_id,
					amount: this.amount,
					setmeal_id: this.setmeal_id,
					spec_id: this.spec_id
				}
				const {
					data: res
				} = await uni.$http.post('/Wechat/Order/getOrderLeaseTerm', params)
				this.goodsInfo = res.data
			}
		}
	}
</script>


<style scoped lang="scss">
	.container {
		padding-bottom: 110rpx;
		font-size: 30rpx;
	}

	.divider {
		width: 100%;
		height: 1rpx;
		background-color: #eee;
		margin: 20rpx 0;
	}

	.text-color {
		color: #999;
		font-size: 25rpx;
		line-height: 1.5rem;
	}

	.detail-top {
		background-color: #fff;
		padding: 30rpx;
		align-items: center;
	}

	.top-info {
		display: flex;
	}

	.top-goods-info {
		display: flex;
		flex-direction: column;
	}

	.total {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.goods-price {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		text-align: center;
	}

	.every-count {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 10rpx;
	}

	.every-tips {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}

	.return-btn {
		width: 100%;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		text-align: center;

	}

	.return {
		width: 90%;
		background-color: red;
		color: #fff;
		margin: 2vh auto;
		border-radius: 40rpx;
	}

	.content {
		color: #959595;
		font-size: 25rpx;
		margin-top: 2vh;
	}
</style>
